import React from 'react'
import './Home.css'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import {
	EnvironmentOutlined, CarryOutOutlined
} from '@ant-design/icons';
import { Loading } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { Swiper, Badge } from 'antd-mobile'

export default function Home() {
	const navigate = useNavigate()
	return (
		<div>
			<div className='ws-home-inp' onClick={() => {
				navigate('/search')
			}}>
				<SearchBar style={{ width: '75%', marginLeft: '10px', marginTop: '10px' }} placeholder='搜索演出'
				/>
				<span><EnvironmentOutlined />北京</span>
			</div>
			<div className='ws-home-lbt'>
				<Swiper autoplay loop
					style={{
						"--track-padding": "0 0 0", //指示器与轮播区域分离
						autoplayInterval: 1800, //轮播间隔时间
					}}
					indicatorProps={{
						style: {
							"--active-dot-color": "black", //当前元素圆点颜色
							"--dot-border-radius": "50%",  //元素圆点圆角值
							"--active-dot-border-radius": "7px",  //当前元素圆点的圆角值 
							"--active-dot-size": "8px",  //元素圆点的大小
							"--dot-size": "8px", //元素圆点的大小
							"--dot-spacing": "10px", //圆点与圆点之前的距离
						},
					}}
					defaultIndex={0}>
					<Swiper.Item>
						<img src="/img/1.jpeg" alt="" />
					</Swiper.Item>
					<Swiper.Item>
						<img src="/img/2.jpg" alt="" />
					</Swiper.Item>

					<Swiper.Item>
						<img src="/img/3.jpg" alt="" />
					</Swiper.Item>
					<Swiper.Item>
						<img src="/img/4.jpg" alt="" />
					</Swiper.Item>
				</Swiper>
			</div>

			<div className='ws-home-fl'>
				<div className='ws-tb'>
					<img src="/img/5.jpg" alt="" />
					<br />
					<span>音乐会</span>
				</div>
				<div className='ws-tb'>
					<img src="/img/6.jpg" alt="" />
					<br />
					<span>话剧</span>
				</div>
				<div className='ws-tb'>
					<img src="/img/7.jpg" alt="" />
					<br />
					<span>演唱会</span>
				</div>
				<div className='ws-tb'>
					<img src="/img/8.jpg" alt="" />
					<br />
					<span>美术展馆</span>
				</div>
			</div>
			<div className='ws-home-fl'>
				<div className='ws-tb'>
					<img src="/img/9.jpg" alt="" />
					<br />
					<span>相声</span>
				</div>
				<div className='ws-tb'>
					<img src="/img/10.jpg" alt="" />
					<br />
					<span>曲艺杂谈</span>
				</div>
				<div className='ws-tb'>
					<img src="/img/11.jpg" alt="" />
					<br />
					<span>体育赛事</span>
				</div>
				<div className='ws-tb'>
					<img src="/img/12.jpg" alt="" />
					<br />
					<span>舞台剧</span>
				</div>
			</div>

			<div className='ws-rm'>
				<span>热门演出</span>
				<p>查看全部</p>
			</div>

			<div className='ws-ych'>
				<div>
					<img src="/img/13.jpg" alt="" />
					<p>Jony-leron 全球巡演</p>
					<span>演唱会</span>
				</div>
				<div>
					<img src="/img/14.jpg" alt="" />
					<p>Jony-leron 全球巡演</p>
					<span>演唱会</span>
				</div>
			</div>

			<div className='ws-rl'>
				<div>
					<p><CarryOutOutlined />&nbsp;&nbsp;演出日历</p>
					<span>莫奈·印象作品展</span><br />
					<span style={{ color: '#807d7d' }}>美术展馆</span>
				</div>
				<div>
					<img src="/img/17.jpg" alt="" />
				</div>
			</div>


			<div className='ws-yr'>
				<span>热门艺人</span>
				<p>查看全部</p>
			</div>

			<div className='ws-gs' onClick={() => {
				navigate('/yi')
			}}>
				<div>
					<img src="/img/17.jpg" alt="" />
					<br />
					<span>Jony-leron</span>
				</div>
				<div>
					<img src="/img/18.jpg" alt="" />
					<br />
					<span>Jony-leron</span>
				</div>
				<div>
					<img src="/img/19.jpg" alt="" />
					<br />
					<span>Jony-leron</span>
				</div>
				<div>
					<img src="/img/20.jpg" alt="" />
					<br />
					<span>Jony-leron</span>
				</div>
			</div>

			<div className='ws-qz'>
				<span>热门群组</span>
				<p>查看全部</p>
			</div>

			<div className='ws-xy'>
				<div className='ws-xy-1'>
					<img src="/img/17.jpg" alt="" />
					<div style={{ marginTop: '10px', marginLeft: '5px' }}>
						<span>橘子海巡演群</span>
						<span style={{ color: 'rgb(192, 189, 189)' }}>4000人参与</span>
					</div>
				</div>
				<div className='ws-xy-1'>
					<img src="/img/18.jpg" alt="" />
					<div style={{ marginTop: '10px', marginLeft: '5px' }}>
						<span>橘子海巡演群</span>
						<span style={{ color: 'rgb(192, 189, 189)' }}>4000人参与</span>
					</div>
				</div>
			</div>

			<div className='ws-tj'>
				<span>为你推荐</span>
			</div>

			<div className='ws-tj-bt'>

				<div className='ws-tj-ys'>
					<img src="/img/21.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>话剧【恋爱中的犀牛】</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 990.0</b></p>
					</div>
				</div>

				<div className='ws-tj-ys'>
					<img src="/img/22.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>舞台剧【虚无的十字架】</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 600.0</b></p>
					</div>
				</div>

				<div className='ws-tj-ys'>
					<img src="/img/23.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>肖邦协奏曲音乐会</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 900.0</b></p>
					</div>
				</div>

				<div className='ws-tj-ys'>
					<img src="/img/24.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>音乐剧【仲夏夜之梦】</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 1990.0</b></p>
					</div>
				</div>
			</div>
			<div>
				<Loading size="24px" style={{ marginLeft: '130px' }}>正在加载</Loading>
			</div>

			<div style={{ height: '50px' }}></div>
		</div>
	)
}